<template>
	<div class="ProhibitedWords">
		<Nav></Nav>
		<div class="writing_right">
			<div class="TitleList">
				<div class="TitleList_padding">
					<div class="TitleList_top">
						<div class="TitleList_top_title"><span></span>违禁词管理</div>
						<div class="TitleList_top_btn" @click="showEdit = !showEdit">添加分类</div>
					</div>
				</div>
				<div class="myarticles" v-loading="loading" element-loading-spinner="el-icon-loading"
					element-loading-text="拼命加载中" element-loading-background="rgba(255, 255, 255, 1)">
					<div class="myarticles_content creation">
						<div class="myarticles_content_tab">
							<div class="myarticles_table">
								<el-table
								:data="infos"
								style="width: 100%">
									<el-table-column
										prop="id"
										label="ID"
										width="180">
									</el-table-column>
									<el-table-column
										prop="name"
										label="分类"
										width="180">
									</el-table-column>
									<el-table-column
										prop="content"
										label="违禁词">
									</el-table-column>
									<el-table-column label="操作">
										<template slot-scope="scope">
											<el-button
											size="mini"
											@click="handleEdit(scope.$index, scope.row)"><img src="@a/img/sv5.svg" />编辑</el-button>
											<el-button
											size="mini"
											type="danger"
											@click="handleDelete(scope.$index, scope.row)"><img src="@a/img/sv6.svg" />删除</el-button>
										</template>
									</el-table-column>
								</el-table>
							</div>
							<div class="not_data not_data2" v-show="infos && infos.length === 0">
								<div class="not_data_icon"><img src="@a/img/bg26.jpg" /></div>
								<div class="not_data_title">暂无信息</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<!-- 编辑 -->
		<div class="Preview Edit" v-show="showEdit">
			<div class="Preview_content">
				<div class="Preview_content_title">
					<div class="content_title_left"><span></span>添加/编辑</div>
					<div class="content_title_right" @click="showEdit=false;id = 0;"><i class="el-icon-close"></i></div>
				</div>
				<div class="Edit_content">
					<div class="Edit_content_list">
						<div class="content_list_dd">名称</div>
						<div class="content_list_dt">
							<el-input placeholder="请输入内容" v-model="input">
							</el-input>
						</div>
					</div>
					<div class="Edit_content_list">
						<div class="content_list_dd">违禁词</div>
						<div class="content_list_dt">
							<el-input type="textarea" :rows="20" placeholder="世界第一=世界的选择" v-model="textarea">
							</el-input>
							<div class="content_list_hint"><img src="@a/img/sv47.svg" />违禁词=要替换的词，<a
									href="https://www.ai-dog.net/help/ruanwen/5.html" target="_blank">常用违禁词模板</a></a>
							</div>
						</div>
					</div>
				</div>
				<div class="Edit_btn">
					<button class="save" @click="add">保存</button>
				</div>
			</div>
		</div>



		<!-- 预览 -->
		<div class="Preview" v-show="showPreview">
			<div class="Preview_content">
				<div class="Preview_content_title">
					<div class="content_title_left"><span></span>预览</div>
					<div class="content_title_right" @click="showPreview = !showPreview"><i class="el-icon-close"></i>
					</div>
				</div>
				<div class="Preview_content_txt ovauto">
					<div class="content_txt_title">我是标题我是标题我是标题</div>
					<div ref="htmlContent">我是内容我是内容我是内容我是内容</div>
				</div>
				<div class="Preview_content_btn">
					<div class="content_btn_list close" @click="showPreview = !showPreview">关闭</div>
					<div class="content_btn_list copy" @click="copyHtml">复制</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import Nav from "@c/common/nav/nav";
	import { MessageBox } from 'element-ui';
	import axios from "axios";

	export default {

		name: "siteManagement",
		data() {
			return {
				id: 0,
				infos: [],
				showLog: false,
				loading: false,
				showEdit: false,
				input: '',
				textarea: '',
				showPreview: false,
			};
		},
		mounted() {
			this.getList();
		},
		components: {
			Nav
		},
		methods: {
			handleEdit(index, row) {
				let that = this;
				that.id = that.infos[index].id
				that.input = that.infos[index].name
				that.textarea = that.infos[index].content
				that.showEdit = true;
			},
			handleDelete(index, row) {
				let that = this;
				MessageBox.confirm(`确定删除此条数据吗？`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.axios.post('/api/articleForbiddenwords/delete', {
						id: that.infos[index].id
					}).then(
						res => {
							if (res.code === 1) {
								that.getList()
							}
						}
					)
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
					// 用户点击取消或者弹窗关闭时不做任何操作
				});
			},
			add() {
				let that = this;
				that.axios.post('/api/articleForbiddenwords/add', {
					name: that.input,
					content: that.textarea,
					id: that.id
				}).then(
					res => {
						if (res.code === 1) {
							that.getList();
							that.id = 0;
							that.showEdit = false;
						}
					}
				)
			},
			editInfo(index) {
				let that = this;
				that.id = that.infos[index].id
				that.input = that.infos[index].name
				that.textarea = that.infos[index].content
				that.showEdit = true;
			},
			getList() {
				let that = this;
				this.loading = true;
				this.axios.post('/api/ArticleForbiddenwords/list').then(
					res => {
						if (res.code === 1) {
							that.infos = res.result
							this.loading = false;
						}
					}
				)
			},
			//复制
			copyHtml() {
				const htmlElement = this.$refs.htmlContent
				const range = document.createRange()
				range.selectNode(htmlElement)
				window.getSelection().removeAllRanges()
				window.getSelection().addRange(range)
				document.execCommand('copy')
				window.getSelection().removeAllRanges()
				this.$message.success('已复制到剪贴板')
			},
			//删除
			deleteInfo(index) {
				let that = this;
				MessageBox.confirm(`确定删除此条数据吗？`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.axios.post('/api/articleForbiddenwords/delete', {
						id: that.infos[index].id
					}).then(
						res => {
							if (res.code === 1) {
								that.getList()
							}
						}
					)
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
					// 用户点击取消或者弹窗关闭时不做任何操作
				});
			},
		},
	}
</script>

<style>
	@import "ProhibitedWords.css";
</style>